<template>
	<view v-if="recipe" class="recipe">
		<view class="thumb">
			<div v-if="recipe.vfurl"  style="background: rgb(41, 41, 43)">
				<video :src="recipe.vfurl" style="height: 43vh;width:100%" ></video>
			</div>
			<image v-if="!recipe.vfurl" mode="widthFix" style="background-color: #eeeeee;width: 100%;max-height:60vh" :src="recipe.photo_path"></image>
		</view>
		<view class="foodName">
		      <text class="title">{{recipe.title}}</text>
		      <view class="text">
		          <text v-if="recipe.comments_preceded">精品</text>
		          <text v-if="recipe.views_count_text">浏览{{recipe.views_count_text}}</text>
		          <text v-if="recipe.favo_counts">收藏{{recipe.favo_counts}}</text>
		          <text v-if="recipe.dish_count">学做{{recipe.dish_count}}</text>
		      </view>
		</view>
		<view class="foodText">
			<text>{{recipe.n || recipe.cookstory}}</text>
		</view>
		<MenuDetailFoodList :recipe="recipe"/>
		<MenuDetailAnalysis :recipe="recipe"/>
		<view class="step_list">
			<view class="foodLists">- 烹饪步骤 -</view>
			<MenuDetailStepList 
				:step="step" 
				v-for="(step,index) in recipe.cookstep" 
				:key="index"/>
		</view>
		<view class="tip"  v-if="recipe.tips">
			<view class="p">- 小贴士 -</view>
			<rich-text :nodes="text" v-if="text" class="tip_text"></rich-text>
		</view>
		<view class="com" v-if="all">
			 <view>
				 <view class="hot_com">- 评论 -</view>
			 </view>
			 <Comment 
				v-for="(comment,index) in comments" 
				:key="index"
				:author="recipe.user.user_id"
				:comment="comment"
			/>
			<view class="watchAll" @click="showComment" v-if="all>3">查看全部{{all}}条评论</view>
		</view>
		
		<view class="bottom_bar">
			<text @click="backHome">首页</text>
			<text @click="showComment">评论</text>
			<text @click="deLove" v-if="is_fav">已收藏</text>
			<text @click="toLove" v-else>收藏</text>
		</view>
	</view>
</template>

<script>
	import MenuDetailFoodList from '@/components/MenuDetailFoodList/MenuDetailFoodList.vue'
	import MenuDetailAnalysis from '@/components/MenuDetailAnalysis/MenuDetailAnalysis.vue'
	import MenuDetailStepList from '@/components/MenuDetailStepList/MenuDetailStepList.vue'
	import Comment from "@/components/Comment/Comment.vue"
	import { mapMutations } from "vuex";
	export default {
		name:"MenuDetail",
		components:{
			MenuDetailFoodList,
			MenuDetailAnalysis,
			MenuDetailStepList,
			Comment,
		},
		data() {
			return {
				recipe: null,
				text: null,
				all: null,
				comments: null,
				is_fav: 0,
				// love_status:0;
			};
		},
		computed: {
			res: function(){
				return uni.getStorageSync('user') || null;
			}
		},
		onLoad: async function (option) {
			uni.showLoading({
				title: '加载中'
			});
			uni.request({
				url: "https://apis.netstart.cn/douguo/recipe/detail/"+option.id,
				success: async (res) => {
						this.recipe = res.data.result.recipe;
						uni.hideLoading();
						if(this.recipe.tips){
							this.text = this.recipe.tips.replaceAll("\n","<br/>");
							this.text = this.text.replaceAll(" ","&nbsp;");
						}
						//连接云端数据库看是否收藏过
						const db = await uniCloud.database();
						let count = await db.collection('dg_favourite').where({
							cook_id: this.recipe.cook_id
						}).count();
						console.log("count",count.result.total);
						this.is_fav = count.result.total;
				    }
			});
			
			uni.request({
				url: "https://apis.netstart.cn/douguo/recipe/flatcomments/"+option.id+'/0/20',
				success: (res) => {
						this.comments = res.data.result.comments.slice(0,3);
						this.all = res.data.result.cc;
				    }
			});
			// getComment(this.$route.query.id,0).then( res => {
			//         this.comments = res.data.result.comments.slice(0,3);
			//         this.all = res.data.result.cc;
			//     })
		},
		methods:{
			backHome(){
				uni.switchTab({url: '../index/index'})
			},
			showComment(){
				uni.navigateTo({
					url: "../AllComments/AllComments?id=" + this.recipe.cook_id + "&author="+this.recipe.user.user_id,
				});
			},
			...mapMutations(["favoriteAdd","favoriteReduce"]),
			toLove: async function(){
				// console.log(this.recipe)
				// console.log(getApp().globalData.res);
				if(this.res){
					//本地存储
					// this.favoriteAdd({newCook:this.recipe });
					//连接云数据库
					const db = await uniCloud.database();
					// db.collection("dg_favourite").add({name: 'Ben'})
					// 获取名为 `table1` 数据表的引用
					const dg_collection = await db.collection('dg_favourite');
					dg_collection.add({
						cook_id: this.recipe.cook_id,
						data: this.recipe,
					}).then(res=>{
						uni.showToast({
							title: "收藏成功",
						});
					}).catch(err=>{
						uni.showToast({
							title: "出了bug哦",
						});
					});
					
					this.is_fav = !this.is_fav;
				}else{
					uni.showToast({ 
						icon: "error",
						title: "请先授权登录",
					});
				}
			},
			deLove: async function(){
				console.log(this.recipe.cook_id)
				//本地移除
				// this.favoriteReduce({id:this.recipe.cook_id });
				//连接云数据库
				const db = await uniCloud.database();
				db.collection("dg_favourite").where({
					cook_id:this.recipe.cook_id,
				}).remove().then(res => {
					uni.showToast({
						title: "取消收藏",
					});
				}).catch(err => {
					console.log(err)
				})
				this.is_fav = !this.is_fav;
			}
		}

	}
</script>

<style lang="less">
.recipe{
	.bottom_bar{
		display: flex;
		height: 40px;
		align-items: center;
		justify-content: space-around;
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: black;
		color: white;
		z-index: 100;
	}
	.thumb{
		video{
			vertical-align: bottom;
		}
	}
	.step_list{
		.foodLists{
			text-align: center;
			    font-size: 16px;
			    font-weight: 600;
			    margin-top: 30px;
			    padding-bottom: 20px;
		}
	}
	.com{
		margin-bottom: 70px;
		.hot_com{
			text-align: center;
			font-size: 16px;
			font-weight: 600;
			margin-top: 30px;
			margin-bottom: 20px;
		}
		.watchAll{
			margin: 0 auto;
			text-align: center;
			width: 90vw;
			border: 1px solid black;
			border-radius: 25px;
			padding: 7px 0;
		}
	}
	.tip{
		padding: 0 15px;
        margin-top: 20px;
        .p{
            // height: 40px;
            line-height: 40px;
            font-weight: 600;
			font-size: 16px;
			text-align: center;
			margin-top: 30px;
			margin-bottom: 20px;
       }
       .tip_text{
           // margin: 0 15px;
           margin-bottom: 15px;
            line-height: 25px;

       }
    }
	.foodName{
		text-align: center;
		// .title{
		// 	font-size: 20px;
		// 	font-weight: 600;
		// }
		padding: 20px;
			.title{
				font-weight: 600;
				font-size: 20px;
			}
			.text{
				margin-top: 5px;
				text{
					font-size: 14px;
					color: #797979;
					&::after{
						content: '';
						display: inline-block;
						width: 3px;
						height: 3px;
						border-radius: 50%;
						background-color: #797979;
						margin: 0 7px;
						vertical-align: middle;
					}
					&:last-child::after{
						content: "";
						display: none;
					}
				}
			}
	}
	.foodText{
	        width: auto;
	        line-height: 25px;
	        padding: 0 15px;
			// padding: 15px;
	    }
}
</style>
